<!--
 * @Author: ChunLai
 * @Date: 2022-10-25 11:24:53
 * @LastEditTime: 2023-08-10 15:28:13
 * @Description: 理赔服务
 * @FilePath: \0.newInsure\src\views\index\components\LiPeiService.vue
-->
<template>
  <div class="bg-fff">
    <template
      v-if="Object.prototype.toString.call(liPeiData) === '[object String]'"
    >
      <div class="md-lipei" v-html="liPeiData"></div>
    </template>
    <template
      v-else-if="Object.prototype.toString.call(liPeiData) === '[object Array]'"
    >
      <div class="md-lipei">
        <div
          class="lipei-li"
          v-for="(lipei, index) in liPeiData"
          :key="`lipei-${index}`"
        >
          <div class="ftc5 ft15 font3">{{ lipei.label }}</div>
          <div class="ft12 ft_c6 mt14 pdbt_14 lh_2" v-html="lipei.value"></div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'LiPeiService',
  data() {
    return {};
  },
  components: {},
  computed: {
    ...mapGetters({
      lipeiText: 'home/lipeiText',
      lipeicontent: 'page/lipeicontent',
    }),
    liPeiData() {
      let res = '';
      if (this.lipeicontent && this.lipeicontent.length > 0) {
        res = this.lipeicontent;
      }
      if (this.lipeiText && this.lipeiText.length > 0) {
        res = this.lipeiText;
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.md-lipei {
  padding: 0 14px 14px;
}

.lipei-li {
  padding-left: 20px;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background-color: #d44438;
  }

  &:not(:last-child) {
    &::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 4px;
      width: 1px;
      height: 100%;
      border-left: 1px solid #d44438;
    }
  }
}
</style>
